<template>
	<view>
		<view class="header">
			<view class="head">
				<view class="header-t">操作时间</view>
				<view class="header-b">{{ info.create_time | birtime}}</view>
			</view>
			<view class="head">
				<view class="header-t">状态</view>
				<view class="header-b">已调整</view>
			</view>
			<view class="head">
				<view class="header-t">操作人</view>
				<view class="header-b">{{info.user_name}}</view>
			</view>
			<view class="head">
				<view class="header-t">本次总调整</view>
				<view class="header-b">{{goodsList.length}}/共{{goodsList.length}}种货品</view>
			</view>
			<view class="head">
				<view class="header-t">备注</view>
				<view class="header-b">{{info.remark}}</view>
			</view>
		</view>
		<view class="box" v-for="(item,index) in goodsList" :key="index">
				<view class="box-one">
					<image :src="item.cover"></image>
					<view class="box-two">
						<view class="">
							{{item.title}}
						</view>
						<view class="">
					  本次出货数量: 1
						</view>
					</view>
				</view>
				<view class="box-three">
					<view class="min-box">
						规格
					</view>
					<view class="min-box">
						调整数量
					</view>
				</view>
				<view class="box-three" v-for="(val,i) in item.product_list" :key="i">
					<view class="min-box" >
						<block v-for="(spec,specIndex) in val.spec_data" :key="specIndex">
							{{spec}}
							<block v-if="specIndex < val.spec_data.length-1">/</block>
						</block>
						
					</view>
					<view class="min-box" >
						{{val.operate_num}}
					</view>
				</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			operateId:'',
			info:{},
			goodsList:[]
		};
	},
	onLoad(option) {
		this.operateId=option.id
		this.getInfo()
	},
	methods: {
		getInfo(){
			let that=this;
			that.$ajax('/api/v1.stock/info',{
				 operate_id:this.operateId
			}).then(res=>{
				if(res.code==1){
					that.info=res.result;
					that.goodsList=res.result.goods_list
				}
			}).catch(res=>{
				that.$sToast(res.message)
			})
		}
		
		
		
		
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header{
	margin-bottom: 20rpx;
}
.head {
	height: 108rpx;
	line-height: 108rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 0 34rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2upx #eee solid;
  
}
.header-t {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
}
.header-b {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.box{
	background-color: #FFFFFF;
	padding: 40rpx 0;
	padding-bottom: 0;
	box-sizing: border-box;
	.box-one{
		display: flex;
		padding: 0 30upx 30upx 30upx;
		image{
			width: 130rpx;
			height: 130rpx;
			margin-right: 30rpx;
		}
		.box-two{
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:64rpx;
			
		}
	}
	.box-three{
		display: flex;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		height: 110rpx;
		line-height: 110rpx;
		justify-content: space-between;
		border-top: 2rpx solid #eee;
		text-align: center;
		
		.min-box{
			width: 55%;
			text-align: center;
		}
	}
}
</style>
